package com.example.myapplication.ui.screens


import androidx.annotation.DrawableRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Divider
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Clear
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.myapplication.R
import com.example.myapplication.ui.components.CircleRing
import com.example.myapplication.ui.components.TopAppBar

@Composable
fun My() {
    var menus = listOf(
        MenuItem(R.drawable.p1, "学习积分"),
        MenuItem(R.drawable.p2, "学习积分"),
        MenuItem(R.drawable.p3, "学习积分"),
        MenuItem(R.drawable.p4, "学习积分"),
        MenuItem(R.drawable.p5, "学习积分"),
        MenuItem(R.drawable.p6, "学习积分"),
        MenuItem(R.drawable.p7, "学习积分")
    )
    Column() {
        TopAppBar(Modifier.padding(horizontal = 20.dp)) {
            Text(text = "我的", fontSize = 18.sp, color = Color.White)
        }
        LazyColumn() {
            // 个人信息
            item {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier.padding(vertical = 24.dp, horizontal = 8.dp)
                ) {
                    Image(
                        contentScale = ContentScale.Crop,
                        painter = painterResource(id = R.drawable.photo),
                        contentDescription = null,
                        modifier = Modifier
                            .size(62.dp)
                            .clip(
                                CircleShape
                            )
                    )
                    Column(
                        verticalArrangement = Arrangement.SpaceEvenly,
                        modifier = Modifier
                            .padding(horizontal = 8.dp)
                            .height(62.dp)
                    ) {
                        Text(text = "未登录", color = Color(0xff333333), fontSize = 18.sp)
                        Text(text = "已坚持学习28天", color = Color(0xff999999), fontSize = 12.sp)
                    }
                }
            }
            // 菜单
            itemsIndexed(menus) { index, menu ->
                if (index == 3) {
                    Box(
                        modifier = Modifier
                            .height(16.dp)
                            .background(Color(0xFFF5F5F5))
                            .fillMaxWidth()
                    )
                }
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(vertical = 8.dp, horizontal = 8.dp)
                ) {
                    Image(
                        contentScale = ContentScale.Crop,
                        painter = painterResource(id = menu.icon),
                        contentDescription = null,
                        modifier = Modifier
                            .size(17.dp)
                            .clip(
                                CircleShape
                            )
                    )

                    Column(modifier = Modifier.padding(horizontal = 8.dp)) {
                        Row(modifier = Modifier.padding(vertical = 8.dp)) {
                            Text(
                                text = menu.title,
                                fontSize = 16.sp,
                                color = Color(0xff333333),
                                modifier = Modifier.weight(1f)
                            )
                            Icon(
                                painter = painterResource(id = R.drawable.you),
                                contentDescription = null,
                                modifier = Modifier.width(13.dp),
                                tint = Color.Unspecified
                            )
                        }
                        // 分割线
                        Divider()
                    }
                }
            }
        }
    }
}

data class MenuItem(@DrawableRes val icon: Int, val title: String)


@Preview
@Composable
fun MyPreview() {
    My()
}

